<template>
  <div class="app-container flex-column">
    <div class="flex-between mt10 mb10">
      <div></div>
      <div>
        <el-button type="primary" @click="newConfig">新增</el-button>

        <el-button type="danger" icon="el-icon-refresh" @click="handleRefreshCache">刷新缓存</el-button>
      </div>
    </div>
    <div style="flex: 1;">
      <el-table :data="tableList" :height="tableheight" border stripe @row-click="getrow"
        :row-class-name="tableRowClassName" highlight-current-row style="height: 100%;">
        <el-table-column label="序号" width="60" header-align="center" align="center" show-overflow-tooltip>
          <template scope="scope">
            <span>{{ (currentpage - 1) * pagesize + scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="字典名称" width="160" header-align="center" prop="dict_name" show-overflow-tooltip />
        <el-table-column label="字典类型" width="160" header-align="center" prop="dict_type" show-overflow-tooltip>
          <template slot-scope="scope">
            <router-link :to="'/system/dict-data/index/'+  scope.row.dict_id" class="link-type">
              <span>{{ scope.row.dict_type }}</span>
            </router-link>
          </template>
        </el-table-column>
        <el-table-column label="状态" width="80" align="center" prop="config_type">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status" />
          </template>
        </el-table-column>
        <el-table-column label="备注" header-align="center" prop="remark" show-overflow-tooltip />
        <el-table-column label="创建时间" header-align="center" prop="createtime" width="160" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.create_time) }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="100" header-align="center">
          <template scope="scope">
            <el-link type="primary" @click="EditConfig(scope.row )">修改</el-link>
            <el-link type="primary" class="ml10" @click="handleDelete(scope.row )">删除</el-link>

          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="mb20">
      <pagination v-show="total > 0" :total="total" :page.sync="currentpage" :limit.sync="pagesize"
        @pagination="getList" />
    </div>



    <edit :dialogedit.sync="dialogedit" :ruleform="ruleform" @reload="getList" />

  </div>
</template>

<script>
  import {
    listType,
    delType,
    refreshCache
  } from '@/api/system/dict/type';
  import edit from './edit';
  export default {
    name: "Dict",
    components: {
      edit
    },
    dicts: ['sys_normal_disable'],
    data() {
      return {
        total: 0,
        currentpage: 1,
        pagesize: 20,
        // 岗位表格数据
        tableList: [],
        tableheight: 400,
        // 查询参数
        queryParams: {},
        getindex: -1,
        ruleform: {},
        dialogedit: false
      };
    },
    created() {
      this.getList();

    },
    mounted() {
      this.$nextTick(() => {
        this.settableheiht();
        window.onresize = () => {
          this.settableheiht();
        };
      });
    },
    methods: {
      /** 删除按钮操作 */
      handleDelete(row) {
        const dict_name = row.dict_name;
        var Params = {
          dict_id: row.dict_id
        }
        this.$modal
          .confirm(`是否确认删除?字典名称:${dict_name}？`)
          .then(function() {
            return delType(Params);
          })
          .then(() => {
            this.getList();
            this.$modal.msgSuccess('删除成功');
          })
          .catch(() => {});
      },
      /** 修改岗位列表 */
      EditConfig(row) {
        this.ruleform = {
          dict_id: row.dict_id,
          dict_name: row.dict_name,
          dict_type: row.dict_type,
          status: row.status,
          remark: row.remark
        }
        this.dialogedit = true;
      },
      /** 新增岗位列表 */
      newConfig() {
        this.ruleform = {
          dict_id: 0,
          dict_name: "",
          dict_type: "",
          status: "",
          remark: "",
        }
        this.dialogedit = true;
      },
      /** 查询岗位列表 */
      getList() {
        this.getindex = -1;

        var Params = {
          page: this.currentpage,
          pagesize: this.pagesize
        }

        listType(Params).then(response => {
          this.tableList = response.rows;
          this.total = parseInt(response.total);

        });
      },

      tableRowClassName({
        row,
        rowIndex
      }) {
        row.index = rowIndex;
      },
      getrow(row) {
        this.getindex = row.index;
      },
      handleRefreshCache() {
        refreshCache().then(() => {
          this.$modal.msgSuccess("刷新成功");
        });
      },
      settableheiht() {
        var clientHeight = document.body.clientHeight;
        clientHeight = clientHeight - 220;
        this.tableheight = clientHeight;
      }
    }
  };
</script>
